<template>
  <div class="intake-page">
    <div class="intake-top">
      <div class="f36 text-white flex align-center">
        {{ patientName }}
        <div class="iconfont iconxiugai ml15" @click="changeName" />
      </div>
      <div class="mt20" />
      <van-search
        v-model="foodName"
        @blur="getFoodList"
        class="xlt-search"
        shape="round"
        background="transparent"
        :placeholder="type == 1 ? '请输入食物名称' : '请输入出量类型'"
      />
    </div>
    <div class="intake-main Quantity-content">
      <div class="hfull-left">
        <div class="content-left overflow-y" v-if="type == 1">
          <div
            v-for="(item,index) of leftList"
            :key="index"
            @click="setFoodId(item)"
            :class="['content-item', foodId == item.id ? 'concent-active' : '']"
          >
            <div class="li-left" v-if="foodId == item.id" />
            {{ item.foodName }}
          </div>
        </div>
      </div>
      <div
        class="content-right flex1"
      >
        <div
          v-for="(item,index) of foodList"
          :key="index"
          class="right-item"
          @click="foodClick(item)"
        >
          <div>
            <div class="f26 title-black">
              {{ item.foodName }}
            </div>
            
            <div class="f20 title-gray" v-if="type == 1">
              {{ item.baseWaterNum }}{{ item.waterUnit }}/{{ item.baseUnitNum }}{{ item.foodUnit }}
            </div>
          </div>
          <div class="iconfont icontianjia" />
        </div>
      </div>
    </div>
    <div class="btn-main" :style="chooseListPopup ? 'z-index: 2050' : 'z-index: 850'">
      <div class="sub-btn" :class="[ allNum > 0 ? 'btn-active' : '']">
        <span class="text-gray9" v-if="!allNum">还没有提交任何数据</span>
         
        <div class="data-main" v-else>
          <div
            @click="chooseListPopup = !chooseListPopup"
            class="sub-left"
          >
            <van-icon name="arrow-up" class="mr5 title-blue" />
            <span class="btn-text">
              {{ type == 1 ? '摄入量' : '排出量' }}总计：{{ allNum }}毫升（ml）
            </span>
          </div>
          <div @click="subPopup = true" class="sub-text">
            提交数据
          </div>
        </div>
      </div>
    </div>
    <!-- 摄入量 -->
    <Popup
      v-model="chooseFoodPopup"
      round
      @onConfirm="chooseFoodConfirm"
      position="bottom"
      :title-is-show="false"
    >
      <div>
        <div class="flex flex-center title-black f34 mt40 fw500">
          {{ activeItem.foodName }}
        </div>
        <div class="flex flex-center title-gray f20 mb20" v-if="type == 1">
          {{ activeItem.baseWaterNum }}{{ activeItem.waterUnit }}/{{ activeItem.baseUnitNum }}{{ activeItem.foodUnit }}
        </div>
        <div class="h112 flex choose-model align-center border-bottom">
          <span class="f34 title-black ml25">{{ type == 1 ? '摄入量' : '排出量' }}</span>
          <van-field
            :border="false"
            class="w70"
            v-model="inNum"
            placeholder="请输入整数"
            type="digit"
          />
          <span class="f30 title-gray">{{ type == 1 ? '克(g)' : 'ml' }}</span>
        </div>

        <div class="h112 flex choose-model align-center " v-if="type == 1">
          <span class="title-gray f30 ml25">换算提示：1两=50g  1毫升饮品≈1克</span>
        </div>
      </div>
    </Popup>

    <Popup
      @onConfirm="submitName"
      v-model="namePopup"
      title="填写患者姓名"
    >
      <div class="flex flex-center">
        <van-field
          class="mb20 name-input"
          border
          v-model="patientNameCopy"
          placeholder="请输入患者姓名"
        />
      </div>
    </Popup>

    <Popup
      v-model="subPopup"
      @onConfirm="submit"
      title="确认提交"
    >
      <div class="flex flex-center">
        <span>
          <span class="title-black f34 fw500 mr65">患者姓名：{{ patientName }}</span>
          <span class="title-blue f34 ml25 fw500 mt10" @click="namePopup = true">修改</span>
        </span>
      </div>
      <div class="flex flex-center title-black f34 mb30 fw500">
        摄入水量总计：{{ allNum }}毫升(ml)
      </div>
    </Popup>

    <!-- 摄入量 -->
    <Popup
      v-model="chooseListPopup"
      round
      position="bottom"
      :title-is-show="false"
      :show-fotter="false"
    >
      <div class="minh300 p20">
        <div
          class="flex flex-justify mb20"
          v-for="(item,index) of inDetails"
          :key="index"
        >
          <span class="title-black f32">{{ item.foodName }} {{ item.gnum }}克</span>
          <span @click="deleteItem(index,item)" class="f26 title-black">+{{ item.mlNum }}ml <i class="iconfont iconshanchu ml5 text-gray" /></span>
        </div>
      </div>
    </Popup>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { TAG_BG } from '@/constants/static';
import { useService } from '@/utils/services';
import Popup from '@/components/Popup';
import { useRoute } from 'vue-router';
import { Toast } from 'vant';
import { useUserInfo } from '@/hooks/store';
export default {
  components: {
    Popup
  },
  setup() {
    const route = useRoute();

    const actions = useService(({ hos }) => ({ hos }));

    const userInfo = useUserInfo();

    const backgroundColors = ['#F0F5FF', '#FFF9F9', '#FFF8F0', '#EFFEFD', '#F4F1FF'];

    const tagStyle = (index) => ({
      'background-color': backgroundColors[index % backgroundColors.length],
      'background-image': `url(${TAG_BG[index % backgroundColors.length]})`
    });

    const type = ref(Number(route.query.type)); //1摄入  2排出
    let inDetails = reactive([]);
    const foodId = ref(1);
    const foodName = ref('');
    const chooseFoodPopup = ref(false);
    const namePopup = ref(false);
    const subPopup = ref(false);
    const chooseListPopup = ref(false);
    const leftList = ref([]);
    const foodList = ref([]);
    const inNum = ref(''); //记录量
    const allNum = ref(0); //最终提交量
    const activeItem = ref({});
    const patientName = ref(userInfo.value.nickName); //患者姓名
    const patientNameCopy = ref('');

    const setFoodId = (row) => {
      foodId.value = row.id;
      foodList.value = row.childList || [];
    };

    const foodClick = (row) => {
      chooseFoodPopup.value = true;
      activeItem.value = row;
    };

    const deleteItem = (index, item) => {
      inDetails.splice(index, 1);
      allNum.value = Number((Number(allNum.value) - (Number(item.mlNum) || 0)).toFixed(1));
      if (allNum.value == 0) {
        chooseListPopup.value = false;
      }
    };

    //修改名称
    const changeName = () => {
      namePopup.value = true;
      patientNameCopy.value = patientName.value;
    };

    //保存姓名
    const submitName = () => {
      namePopup.value = false;
      patientName.value = patientNameCopy.value;
    };

    //输入摄入量后点击确认
    const chooseFoodConfirm = () => {
      if (Number(inNum.value) === 0) {
        Toast(`请输入${type.value === 1 ? '摄入量' : '排出量'}`);
        return;
      }

      chooseFoodPopup.value = false;
      if (type.value === 1) {
        allNum.value = (
          Number(allNum.value) +
          ((Number(inNum.value) || 0) / activeItem.value.baseUnitNum) *
            Number(activeItem.value.baseWaterNum)
        ).toFixed(1);
        activeItem.value.gnum = Number(inNum.value); //输入的是多少g
        //摄入量需要把g转换成ml
        activeItem.value.mlNum = (
          ((Number(inNum.value) || 0) / activeItem.value.baseUnitNum) *
          Number(activeItem.value.baseWaterNum)
        ).toFixed(1); //转换以后是多少ml
      } else {
        allNum.value = (Number(allNum.value) + (Number(inNum.value) || 0)).toFixed(1);
        //排出不需要转换
        activeItem.value.mlNum = Number(inNum.value); //输入的是多少g
      }

      inDetails.push(activeItem.value);
      setTimeout(() => {
        inNum.value = '';
      }, 500);
    };

    //获取列表
    const getFoodList = () => {
      let url = type.value == 1 ? 'getFoodList' : 'getOutTypeList';
      let paramsName = type.value == 1 ? 'foodName' : 'typeName';

      actions.hos[url]({ [paramsName]: foodName.value }).then((res) => {
        if (type.value == 1) {
          //摄入类型要默认选择第一种分类
          leftList.value = res || [];
          if (leftList.value.length > 0) {
            foodList.value = leftList.value[0].childList;
            foodId.value = leftList.value[0].id;
          }
        } else {
          foodList.value = res || [];
          foodList.value.forEach((item) => {
            item.foodName = item.typeName;
          });
        }
      });
    };

    getFoodList();

    const submit = () => {
      if (!patientName.value) {
        Toast('请输入患者姓名');
        return;
      }

      let form = {
        inDetails: '', //摄入明细
        inMl: '', //摄入量ml
        outDetails: '', //排出明细
        outMl: '', //排出量 ml
        patientName: '', //患者姓名
        qrcodeId: userInfo.value.qrcodeId //床位主键
      };

      form.patientName = patientName.value;
      if (type.value == 1) {
        form.inDetails = JSON.stringify(inDetails);
        form.inMl = allNum.value;
      } else {
        form.outDetails = JSON.stringify(inDetails);
        form.outMl = allNum.value;
      }
      actions.hos.saveInOutDetails(form).then((res) => {
        inDetails = [];
        allNum.value = 0;
        Toast('提交成功');
        subPopup.value = false;
        chooseListPopup.value = false;
      });
    };

    return {
      tagStyle,
      foodId,
      leftList,
      setFoodId,
      foodClick,
      foodList,
      allNum,
      chooseFoodPopup,
      namePopup,
      subPopup,
      chooseListPopup,
      type,
      foodName,
      getFoodList,
      inNum,
      activeItem,
      chooseFoodConfirm,
      inDetails,
      patientName,
      patientNameCopy,
      submit,
      deleteItem,
      userInfo,
      changeName,
      submitName
    };
  }
};
</script>

<style lang="scss" scoped>
.intake-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.minh300 {
  min-height: 300px;
  max-height: 500px;
  padding-bottom: 130px;
  overflow-y: auto;
}
.choose-model {
  height: 112px;
}
.border-bottom {
  border-bottom: 1px solid rgba(162, 166, 184, 0.1);
}
.w70 {
  width: 70%;
}
.intake-top {
  padding: 40px 32px 30px;
  font-size: 36px;
  font-weight: 500;
  height: 226px;
  color: #ffffff;
}
.Quantity-content {
  display: flex;
  flex: 1;
  margin-top: rpx(25);
  background: #fff;
  .hfull-left {
    background: #f7f7fa;
    .content-left {
      overflow-y: auto;
      width: 232px;
      font-size: 28px;
      height: calc(100vh - 340px);
      border-radius: 0 rpx(10) 0 0;
      padding-bottom: 50px;
      background: #f7f7fa;
      .content-item {
        font-size: rpx(32);
        position: relative;
        height: 96px;
        line-height: 96px;
        text-align: center;
        background: #f7f7fa;
      }
      .concent-active {
        color: #373d52;
        background: #fff;
        font-weight: 500;
      }
      .h180 {
        height: 180rpx;
      }
    }
  }

  .content-right {
    background: #fff;
    border-radius: rpx(10) 0 0 0;
    height: calc(100vh - 370px);
    padding: 0 rpx(20);
    margin-left: 30px;
    overflow-y: auto;
    .right-item {
      padding: 30px 0 20px 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(162, 166, 184, 0.2);
      justify-content: space-between;
      .f21 {
        font-size: rpx(42);
      }
    }
    .icontianjia {
      color: #20beb6;
      margin-right: 25px;
    }
    .h180 {
      height: 180rpx;
    }
  }
  .empty-tip {
    width: 100%;
    height: 70%;
    padding: rpx(20) 0;

    .empty-image {
      width: rpx(180);
      height: rpx(180);
    }
  }
  .right-full {
    border-radius: 0;
    margin-left: 0;
  }
}
.li-left {
  width: 10px;
  height: 46px;
  background: #27cdc5;
  border-radius: 0 5px 5px 0;
  position: absolute;
  top: 25px;
}
.title-black {
  color: #373d52;
}
.title-gray {
  color: #a2a6b8;
}
.btn-main {
  width: 100%;
  display: flex;
  align-items: center;
  line-height: 56px;
  justify-content: center;
  height: 112px;
  position: fixed;
  z-index: 850;
  bottom: 20px;
  .sub-btn {
    position: relative;
    width: 90%;
    font-size: 32px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8ed;
    border-radius: 50px;
    color: #777b8f;
    overflow: hidden;
    border-radius: 56px;
    text-align: center;
    .data-main {
      height: 100%;
      display: flex;
      width: 100%;
      justify-content: space-between;
      .sub-left {
        width: 100%;
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        .at-icon {
          color: #20beb6;
        }
        .btn-text {
          font-size: 24px;
          color: #20beb6;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 340px;
        }
      }
      .sub-text {
        width: 240px;
        height: 100%;
        background: #20beb6;
        text-align: center;
        font-size: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 100px;
        color: #fff;
      }
    }
  }

  .btn-active {
    background: #ffffff;
    border: 2px solid #20beb6;
    box-shadow: 0px 5px 5px 0px rgba(5, 101, 96, 0.35);
    text-align: start;
  }
}
.title-black {
  color: #373d52;
}
.title-gray {
  color: #a2a6b8;
}
.title-blue {
  color: #27cdc5;
}
.name-input {
  border-bottom: 1px solid #f2f2f2;
  margin: 0 40px;
}
</style>